<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .swiper-contain {
        user-select:none;
        position: relative;
        width: 590px;
        height: 470px;
        margin: 100px auto;
        overflow: hidden;
      }
      .swiper-wrapper{
        width: 1000%;
        height: 470px;
        transition: 500 ease;
        /* 必须要设置 不然第一次没有效果 */
        left: 0;
        position: absolute;
        z-index: 1;
       
      }
      .swiper-wrapper img{
        
        float: left;
      }
      .swiper-contain .b{
        position: absolute;
        padding:17px 10px;
        background-color: #999;
        opacity: 0.6;
        font-size: 29px;
        cursor: pointer;
        top: 200px;
        z-index: 2;
      }
      .btn-left{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        left: 0;
      }
      .btn-right{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        right: 0;
      }
      .point{
        position: absolute;
        width: 100px;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 30px;
        z-index: 2;
      }
      .point .radispoint{
        cursor: pointer;
        width:10px;
        height: 10px;
        margin:0 5px;
        background-color: #fff;
        opacity: 0.8;
        border-radius: 50%;
        float:left;
      }
      .radispoint.active{
        background-color: #007aff;
      }
    </style>
  </head>
  <body>
    <div class="swiper-contain">
      <ul class="swiper-wrapper">
        <img src="./图片/1.jpg">
        <img src="./图片/2.jpg">
        <img src="./图片/3.jpg">
        <img src="./图片/4.jpg"> 
        <img src="./图片/5.jpg">
        <img src="./图片/1.jpg">
      </ul>
      <div class="b btn-left"><</div>
      <div class="b btn-right">></div>
      <div class="point">
        <!-- 设置data-n和上面的图片对应起来 -->
        <div class="radispoint active" data-n="0"></div>
        <div class="radispoint" data-n="1"></div>
        <div class="radispoint" data-n="2"></div>
        <div class="radispoint" data-n="3"></div>
        <div class="radispoint" data-n="4"></div>
      </div>
    </div>
    <script>
      // 轮播图这里用节流操作
      // 轮播图的主要思想：先实现左右两个按钮的滑动效果，通过改变index下标来改变图片的位置
      //  进行圆点的切换的操作，也是通过index的思想操作，最后在进行自动轮播，自动录播就是
      //    循环调用向右滑动的事件 这里差不多完成了，最后可以再鼠标移入图片中暂停定时器，
      //      移除后再开启定时器
      // 这里轮播图的思想就是通过改变index下标来达到切换图片的效果
      var btnleft = document.querySelector('.btn-left')
      var btnright = document.querySelector('.btn-right')
      var wrapper = document.querySelector('.swiper-wrapper')
      var img = document.querySelectorAll('.swiper-wrapper img')
      let index = 0
      let timer = null
      // 设置一个函数节流锁
      let lock = false
      // 向右滑动的方法  自动轮播其实就是相当于按了向右的按钮 所以这里把向右的方法拷贝过来
      function rightChange(){
        // 判断节流锁 如果没被锁可以继续执行操作 否则返回
        if(lock) return
        wrapper.style.transition = '0.5s ease'
        index++
        //因为这里要花0.5s过度 所以下面的定时器要设置0.5秒的时间
        wrapper.style.left = -590*index + 'px'
        if(index === 5){
          // 不要把这个放到定时器里面 不然在圆点切换的时候会有问题 因为放在定时器里面是异步操作
          index = 0
          // 开启一次性定时器，时间要和过渡效果的时间一样 可以制造会到第一个的假象
          setTimeout(()=>{
            wrapper.style.left = 0
            // 这里关闭了过渡效果 所以要在点击前加过渡效果，不然以后就没有过渡效果了
            wrapper.style.transition = 'none'
          },500)
        }
        // 切换小圆点高亮
        changePoiont()
        // 操作完后给节流锁上锁
        lock = true
        setTimeout(()=>{
          // 让500毫秒之后再解锁
          lock = false
        },500)
      }
      // autoChange()
      btnleft.addEventListener('click',()=>{
        if(lock) return
        index--
        if(index===-1){
          index = img.length-1
          wrapper.style.left = -590*index + 'px'
          wrapper.style.transition = 'none'
          index--
          setTimeout(()=>{
            wrapper.style.left =  -590*index + 'px'
            wrapper.style.transition = '0.5s ease'
          },0)
        }else{
          wrapper.style.left = -590*index+'px'
        }
        // 切换小圆点高亮
        changePoiont()
        lock = true
        setTimeout(()=>{
          lock = false
        },500)
      })
      btnright.addEventListener('click',rightChange)
      const points = document.querySelectorAll('.radispoint')
      // 小圆点高亮切换
      function changePoiont(){
        points.forEach((item,i)=>{
          // 利用排他思想
          if(index === i){
            item.classList.add('active')
          }else{
            item.classList.remove('active')
          }
        })
      }
      // 点击小圆点的图片的切换  可以使用事件委派，给父元素绑定点击事件 e.target就是点击事件
        // 点击的时候要关闭定时器
        const point = document.querySelector('.point')
        point.addEventListener('click',function(e){
          // getAttribute 可以获得当前标签的属性 这里得到的字符串，要转为数字
          if(e.target.getAttribute('data-n')){
            index = parseInt(e.target.getAttribute('data-n'))
            wrapper.style.left = -590*index+'px'
            changePoiont()
          }
          
        })
      
        // 自动轮播
        timer = setInterval(rightChange,2000)
        // 监听鼠标移入事件 暂停轮播
        let contain = document.querySelector('.swiper-contain')
        // 鼠标移入事件
        contain.addEventListener('mouseenter',()=>{
          clearInterval(timer)
        })
        // 鼠标移除事件
        contain.addEventListener('mouseleave',()=>{
          clearInterval(timer)
          timer = setInterval(rightChange,2000)
        })
    </script>
  </body>
</html>
